   <template>
   	<!--//本页 用到components里面的三个组件-->
   	<!--单场比赛详情-->
	<div >
		<div><span  class="cl-Gray">当前位置 : 球队表现 /</span><span class="cl-Gred">赛况</span></div>
		<div class="panel-data">
			<img src="../assets/team_header.png"/>
			<div class="home-court">
				<b><span>主场</span></b>
	
				<img v-if="mockData.redTeam" width="100" :src="mockData.redTeam.teamIcon||initImg" />
		
				<div class="cl-main school ">{{mockData.redTeam.teamName||'主场球队'}}</div>
				<div class="home-score">
						<div>
						<h2>{{mockData.redTeam.matchData.redCard||0}}</h2>
						<span class="cl-main">红牌</span>
					</div>
					
					<div>
						<h2>{{mockData.redTeam.matchData.yellowCardCard||0}}</h2>
						<span class="cl-main">黄牌</span>
					</div>
					
				
					<div>
						<h2>{{mockData.redTeam.matchData.possession||0}}%</h2>
						<span class="cl-main">控球率</span>
					</div>
					
				</div>
			</div>
			<div class="score-show">
				<h3 class="">{{(mockData.startTime|initDate)||"暂无日期信息"}} </h3>
				<h1 class="ft-size64">
					<span>{{mockData.redTeam.matchData.goal}}</span> <span>:</span>  <span>{{mockData.blueTeam.matchData.goal}}</span>
				</h1>
				<div class="control-ball">
					<div class="control-ball-mockData.redTeam" :style="{'width': mockData.redTeam.matchData.possession+'%'}" ></div>
				</div>
				<span class="cl-main" >控球占比</span>
				
			</div>
			<div class="visitor-court">
				<b><span>客场</span></b>
	
				<img v-if="mockData.blueTeam" width="100" :src="mockData.blueTeam.teamIcon||initImg" alt="" />
		
				<div class="cl-main school ">{{mockData.blueTeam.teamName}}</div>
				<div class="home-score">
					
				
					<div>
						<h2>{{mockData.blueTeam.matchData.possession}}%</h2>
						<span class="cl-main">控球率</span>
					</div>
					<div>
						<h2>{{mockData.blueTeam.matchData.yellowCard}}</h2>
						<span class="cl-main">黄牌</span>
					</div>
					<div>
						<h2>{{mockData.blueTeam.matchData.redCard}}</h2>
						<span class="cl-main">红牌</span>
					</div>

				</div>
			</div>
			
		</div>
		 
		<div class="video">
			<span>精彩集锦</span>
			<video controls="controls"  :poster="initImg">
			<source :src="mockData.video" type="video/mp4"></source>
			<source :src="mockData.video" type="video/ogg"></source>
			<source :src="mockData.video" type="video/webm"></source>
			<object width="" height="" type="application/x-shockwave-flash" data="myvideo.swf">
				<param name="movie" value="myvideo.swf" />
				<param name="flashvars" value="autostart=true&amp;file=myvideo.swf" />
			</object>
			当前浏览器不支持 video直接播放，点击这里下载视频： <a href="myvideo.webm">下载视频</a>
			</video>
		</div>
		<!--数据展示模块-->
		<div class="view-content">
			<div class="view-left">
				
				<h3 class="column-heading">比赛数据</h3>
				<!--比赛数据-->
				<game-data 
					:red="mockData.redTeam.matchData" 
					:blue="mockData.blueTeam.matchData"
					:max="mockData.maxMoving">
				</game-data>
				
				<h3 class="column-heading"> 首发阵容</h3>
				<!--首发阵容-->
				<start-line
					:redStart = "mockData.redTeam.starting"
					:redSub = "mockData.redTeam.sub"
					:blueStart = "mockData.blueTeam.starting"
					:blueSub = "mockData.blueTeam.sub"
					:teamName="{'red':mockData.redTeam.teamName,'blue':mockData.blueTeam.teamName}">
				</start-line>
				
				<h3 class="column-heading">赛事事件 </h3>
				<!--赛事事件-->
				<events-happened
					:eventsHappened="mockData.eventsHappened"
					:redTeamName="mockData.redTeam.teamName"
					:blueTeamName="mockData.blueTeam.teamName">
				</events-happened>
				
			</div>
			
			<div class="view-right">
				<h3 class="column-heading">射手榜</h3>
				<div class="top-scorer">
					<tr class="tr">
						<th>排名</th>
						<th>姓名</th>
						<th>学校</th>
						<th>个</th>
					</tr>
					<tr class="li" v-for="person  in mockData.topScore">
						<td>
							<span v-if=" person.rank>3 " >{{person.rank}}</span>
							<img src="../assets/jinpai.png" v-if="person.rank==1" />
							<img src="../assets/yinpai.png" v-if="person.rank==2" />
							<img src="../assets/tongpai.png" v-if="person.rank==3"/>
						</td>
						<td>
							<span > 
								<img width="30" class="nameImg" :src="person.playerIcon||initImg"/>
								<span >{{person.studentName}}</span>	
							</span>
						</td>
						

						<td><span class="person-school">{{person.teamName}}</span></td>
						<td><span >{{person.goals}}</span></td>
					</tr>
					
				</div>
				<h3 class="column-heading">跑动距离</h3>
				<div class="run-distance">
					<tr class="tr">
						<th>排名</th>
						<th>姓名</th>
						<th>学校</th>
						<th>m</th>
					</tr>
					<tr class="li" v-for="person  in mockData.runDistance">
						<td> 
							<span v-if=" person.rank>3 ">{{person.rank}}</span>
							<img src="../assets/jinpai.png" v-if="person.rank==1" />
							<img src="../assets/yinpai.png" v-if="person.rank==2" />
							<img src="../assets/tongpai.png" v-if="person.rank==3" />
						</td>
						<td> <span> 
								<img width="30" class="nameImg" :src="person.playerIcon||initImg"/>
								<span >{{person.studentName}}</span>
							</span>
						</td>
						<td>
							<span>{{person.teamName}}</span>
						</td>
						<td>
							<span class="">{{person.distance}}</span>
						</td>
					
					</tr>
				</div>
				<h3 class="column-heading">最快速度</h3>
				<div class="fastest-speed">
					<tr class="tr">
						<th>排名</th>
						<th>姓名</th>
						<th>学校</th>
						<th>m/s</th>
					</tr>
					<tr class="li"  v-for="person  in mockData.fastestSpeed">
						<td>
							<span v-if=" person.rank>3 " >{{person.rank}}</span>
							<img src="../assets/jinpai.png" v-if="person.rank==1" />
							<img src="../assets/yinpai.png" v-if="person.rank==2" />
							<img src="../assets/tongpai.png" v-if="person.rank==3"/>	
						</td>
						<td>
							<span > 
								<img width="30" class="nameImg" :src="person.playerIcon||initImg"/>
								<span >{{person.studentName}}</span>	
							</span></td>
						<td>
							<span>{{person.teamName}}</span>
							
						</td>
						<td>
							<span class="">{{person.maxSpeed||'0'}}</span>
							
						</td>
						



					</tr>
				</div>
			</div>
		</div>
		
		
	</div>

	
</template>
<script type="text/javascript">
	import gameData from "@/components/gameData.vue"
	import startLine from "@/components/startLine"
	import eventsHappened from "@/components/eventsHappened"
	import mockData from '../json/mockData.json'
	
	export default{
		name:'EventDetails',
		props:{
			navActive:String,
			addrNav:Boolean,
			comId:String,

		},
		data(){
			return{
				mockData:mockData,
				dataUrl:'http://101.37.33.145:3100/weixin/getMatchView.do',
				navTarget:'TeamPerformance',
				eventId:this.$route.params.id
			}
		},
		
		mounted:function(){
				this.$emit('ch-nav-active',this.navTarget);	
				this.getData();
		},
		methods:{
			getData:function(){
				this.$axios.post(
					this.dataUrl,
					{	
						leagueId:this.comId,
						matchId:this.eventId
					}
				).then(
					res=>{this.mockData=res.data}

				).catch(
					err=>{
						console.log(err,'比赛详情页的请求失败了')
					}
				)
			}
		},
		
		computed:{

		},
		components:{
			gameData,
			startLine,
			eventsHappened
		},
		directive:{
			bgImg:{
				inserted:function(el,binding){
//					el.background= 'url('+binding.value+') no-repeat';
//					el.innerHTML= binding.value
				}
			}
		}
	}
</script>

<style scoped="scoped">
	.video{
		position: relative;
		box-sizing: border-box;
		width: 80%;
		height: 500px;
		margin:  auto;
		margin-top:30px ;
		padding: 10px;
		background-color: black
	}
	.video>span{
		position: absolute;
		color: white;
	}
	video{
		width: 100%;
		height: 100%;
		margin: 0 auto;
	}
	img{
		vertical-align: middle;
	}
	.nameImg{
		margin-bottom: 5px;
	}
	table{
		width: 100%;
		
	}
	.tr{
		line-height: 30px;
		font-size: 14px;
		color: white;
		background-color: #479ea2;
	}

	.li{
		
		box-sizing: border-box;
		text-align: center;
		line-height: 50px;
		border: 2px solid #dcdcdc;
		border-top:none ;
		font-size: 12px;
	}
	.li:nth-of-type(2n){
		background-color: #F2F2F2;
	}
	.li>td{
		width: 35%;
		text-align: left;
		text-indent: 1em;
	}
	.li>td:first-of-type,.li>td:last-of-type{
		width: 80px;
		text-align: center;
		text-indent: 0em;
		
	}
	.li>td:first-of-type{
		color: #01AF96;
	}
	.column-heading{
			position: relative;
			box-sizing: border-box;
			width: 100%;
			height: 42px;
			line-height: 42px;
			margin-bottom: 20px;
			margin-top: 30px;
			overflow: hidden;
			text-indent: 1em;
			font-weight: 400;
			font-size: 16px;
			border-bottom:5px solid #77c2c3;
			border-top-left-radius: 5px;
		}
		.column-heading:before{
			content: "";
			position: absolute;
			z-index:-1;
			top: 0px;
			left: -1em;
			width: 126px;
			height: 42px;
			background-color: #77C2C3;
			border-top-right-radius: 10px;
		}
		.column-heading:after{
			content: '';
			position:absolute ;
			top: 3.5px;
			left: calc(123px - 1em );
			border-left:35px solid  #77C2C3;
			border-top:38px solid transparent;
			/*border-right:34px solid aquamarine;*/
		}
	.ft-size64{
		display: flex;
		justify-content: space-around;
		margin-top:0px ;
		font-size: 44px;
	}
	.cl-main{
		color: #77C2C3;
	}
	.cl-Gred{
		display: inline-block;
		color: #E65B00;
		margin-bottom: 30px;
	}
	.cl-Gray{
		color: #666666;
	}
	.panel-data{
		position: relative;
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		height: 280px;
		text-align: center;
		background: linear-gradient(to right,#07252e 0%,#0E4455);
	}
	.panel-data>div{
		width: 33%;
	}
	.panel-data>img{
		position: absolute;
		top: -18px;
		left: calc(50% - 300px);
		width: 600px;
	}
	.home-court,.visitor-court{
		display: flex;
		flex-direction: column;
		align-items: center;
		color: white;
	}
	.home-court>img,.visitor-court>img{
		margin-top:-20px;
		margin-bottom: 20px;
	}
	.home-court>b{
		position: absolute;
		left: -72px;
		top: -72px;
		width: 0px;
		height: 0px;
		color: white;
		border: 70px solid transparent;
		border-top: 70px solid #FF6600;
		transform: rotate(135deg);	
	}
	.visitor-court>b{
		position: absolute;
		right: -72px;
		top: -72px;
		width: 0px;
		height: 0px;
		color: white;
		border: 70px solid transparent;
		border-top: 70px solid #0066CC;
		transform: rotate(-135deg);	
	}
	
	.home-court>b>span{
		position: absolute;
		left: -30px;
		top: -60px;
		width: 50px;
		font-size: 14px;
		transform: rotate(-135deg);
	}
	.visitor-court>b>span{
		position: absolute;
		right: -30px;
		top: -60px;
		width: 50px;
		font-size: 14px;
		transform: rotate(135deg);
	}
	.home-score{
		display: flex;
		justify-content: space-around;
		width: 80%;
	}
	.score-show{
		position: relative;
		z-index: 3;
		top: -30px;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		height: 100%;
		color: white;
	}
	.control-ball{
		
		width: 100%;
		height: 20px;
		margin-top:60px ;
		background-color: #0066CC;
	}
	.control-ball-mockData.redTeam{
	
		height: 100%;
		
		background-color: #E65B00;
	}
	.view-content{
		display: flex;
		justify-content: space-between;
		width: 100%;
		
	}
	.view-left{
		
		width: 70%;
	}
	.view-right{
		
		width:calc( 30% - 30px);
		margin-left: 30px;
	}
</style>
